<script setup>
import { ref } from "vue";
import { getZPaging } from "@/api";

const paging = ref(null);
const dataList = ref([]);

function queryList(pageNo, pageSize) {
  getZPaging({ pageNo, pageSize }).then((res) => {
    if (res.code == 200) {
      paging.value.complete(res.data.list);
    } else {
      paging.value.complete(false);
    }
  });
}
</script>

<template>
  <view class="container">
    <s-nav-bar />
    <view class="container-main">
      <z-paging ref="paging" v-model="dataList" @query="queryList">
        <!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
        <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
        <view v-for="(item, index) in dataList" :key="index" p-y-4 p-x-4>
          <view flex flex-justify-between>
            <view> 名称：测试名称 </view>
            <view> 价格：1000.00</view>
          </view>
          <view> 日期：2023-01-01 </view>
          <view whitespace-normal overflow-hidden text-ellipsis>
            内容：测试内容
          </view>
        </view>
      </z-paging>
    </view>
  </view>
</template>

<style lang="scss" scoped></style>
